<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>显示模式</title>
		<style>
			div{
				background-color: blue;
				width: 150px;
				height: 30px;
				margin: auto;
			}
			.s{
				background-color: aqua;
				width: 100px;
				height: 50px;
				/* margin: auto; */
				
			}
		</style>
	</head>
	<body>
		<!--
		显示模式：
		1.块元素-block
		 比较霸道，单独占一行
		 默认宽度和父盒子一样宽
		 可以给元素设置宽，和高
		 可以给盒子设置水平居中
		 块元素中可以包含行内元素和块元素
		 div，p，h1~h6，ol，ul，li，di，dd，dt
		2.行内元素-inline
		 一行显示多个 
		 和内容一样宽
		 不能给盒子设置宽和高
		 行内元素中只能装文本或其他行内元素
		 span，del，a
		 针对连接标签：
		   链接里面不要放链接
		   特殊情况下可以给a标签设置宽高，并包含块元素，但需要做显示模式的转换。
		3.行内块元素-inline——block
		 一行显示多个
		 默认宽度和内容一样宽
		 可以给元素设置宽，高
		 input，img，td
		元素显示模式的转换
		display：block;	转换成块元素
		 -->
		<div>hello div</div>
		<p class="s">段落标签</p>
		<h4 class="s">4级标题</h4>
		<span class="s">文本</span>
		<del class="s">删除线</del>
		<a class="s">无语</a>
	</body>
</html>
